<template>
    <div>
        <div  style="padding: 35px 15px;">
            <button-tab v-model="frchart">
                <button-tab-item @on-item-click="frchart1Draw()" >今日</button-tab-item>
                <button-tab-item @on-item-click="frchart2Draw()" >本月资金统计(截止昨日)</button-tab-item>
            </button-tab>
        </div>

        <div v-if="frchart==0"  class="p-r-l-15">

            <div id="frchart1" style="width:100%;height:260px"></div>
             <div class="reportItem">
            <div class="body">
                <div class="detailItem">
                    <span class="w-135 text-r">账户余额:</span>
                    <label class="p-l-10 c-orange f-20">{{obj.account.balance | thousands(2)}}元</label>
                </div>
                <div class="detailItem">
                    <span class="w-135 text-r">冻结金额:</span>
                    <span class="p-l-10 c-gray">{{obj.account.frozen | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-135 text-r">账期额度:</span>
                    <span class="p-l-10 c-gray">{{obj.accountPeriod.limit | thousands(2)}}元</span>
                </div>
                 <div class="detailItem">
                    <span class="w-135 text-r">账期可用额度:</span>
                    <span class="p-l-10 c-gray">{{obj.accountPeriod.usableLimit | thousands(2)}}元</span>
                </div>
                 <div class="detailItem">
                    <span class="w-135 text-r">账期冻结额度:</span>
                    <span class="p-l-10 c-gray">{{obj.accountPeriod.frozenLimit | thousands(2)}}元</span>
                </div>
                 <div class="detailItem">
                    <span class="w-135 text-r">账期待还款合计:</span>
                    <span class="p-l-10 c-gray">{{obj.accountPeriod.repaymentsLimit | thousands(2)}}元</span>
                </div>
            </div>
        </div>
        </div>
        <div v-if="frchart==1"  class="p-r-l-15">
            <div id="frchart2" style="width:100%;height:260px"></div>
             <div class="reportItem">
            <div class="body">
                <div class="detailItem">
                    <span class="w-135 text-r">充值金额:</span>
                    <label class="p-l-10 c-orange f-20">{{obj.amtMonth.rechargeAmt | thousands(2)}}元</label>
                </div>
                <div class="detailItem">
                    <span class="w-135 text-r">实际支出:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.pay | thousands(2)}}元</span>
                </div>
                <!-- <div class="divh-15"></div> -->
                <div class="detailItem">
                    <span class="w-135 text-r">实付运费:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.freight | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-135 text-r">调度费:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.dispatch | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-135 text-r">服务费:</span>
                    <span class="p-l-10 c-gray">{{obj.amtMonth.charge | thousands(2)}}元</span>
                </div>
                <div class="detailItem">
                    <span class="w-135 text-r"></span>
                </div>
            </div>
             </div>
        </div>
    </div>
</template>

<script>
import Vue from "vue";

import { Grid, GridItem } from "vux";
import { ButtonTab, ButtonTabItem, Divider } from "vux";

export default {
    props: ['obj','colors'],
    name: "fundsReport",
    components: {
        ButtonTab,
        ButtonTabItem,
        Divider,
        Grid,
        GridItem
    },
    mounted() {
        this.frchart1Draw();
    },
    methods: {
        frchart1Draw() {
            
            var _this = this;
         
            var frchart1 = this.$echarts.init(document.getElementById("frchart1"));
            frchart1.setOption({
                tooltip: {
                    trigger: "axis"
                },
                grid: {
                    left: "1%",
                    right: "1%",
                    bottom: "5%",
                    top:"10%",
                    containLabel: true
                },
                calculable: true,
                xAxis: [
                    {
                          type: "category",
                          data: ["账户余额","冻结金额","账期额度","账期可用额度","账期冻结额度","账期待还款合计"],
                          axisLabel:{rotate:25,interval:0}
                       
                    }
                ],
                yAxis: [
                    {
                        name: "单位：元",
                        type: "value"
                      
                    }
                ],
                series: [
                    {
                        type: "bar",
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return _this.colors[params.dataIndex];
                                }
                            }
                        },
                        data: [_this.obj.account.balance, _this.obj.account.frozen, _this.obj.accountPeriod.limit,_this.obj.accountPeriod.usableLimit,_this.obj.accountPeriod.frozenLimit,_this.obj.accountPeriod.repaymentsLimit]
                    }
                ]
            });
        },
        frchart2Draw() {
            var _this = this;
            var frchart2 = this.$echarts.init(document.getElementById("frchart2"));
            frchart2.setOption({
                tooltip: {
                    trigger: "axis"
                },
                grid: {
                    left: "1%",
                    right: "1%",
                       bottom: "5%",
                    top:"10%",
                    containLabel: true
                },
                calculable: true,
                xAxis: [
                    {
                      
                        type: "category",
                        data: ["充值金额","实际支出", "实付运费", "调度费", "服务费"],
                        axisLabel:{rotate:25,interval:0}
                    }
                ],
                yAxis: [
                    {
                        name: "单位：元",
                        type: "value"
                    }
                ],
                series: [
                    {
                        type: "bar",
                         itemStyle: {
                            normal: {
                                color: function (params) {
                                    return _this.colors[params.dataIndex];
                                }
                            }
                        },
                        data: [_this.obj.amtMonth.rechargeAmt,_this.obj.amtMonth.pay, _this.obj.amtMonth.freight, _this.obj.amtMonth.dispatch, _this.obj.amtMonth.charge]
                       //data:[100,150,180,300,80]
                    }
                ]
            });
        }
    },
    data() {
        return {
            frchart: 0
        };
    }
};
</script>
